<template>
  <div>
      第一个子组件
      <!-- transition 动画组件
        name="动画名"
        通过东 动画名-官方提供的节点
        去自定义样式
         .动画名-enter-active{} 进入
         .动画名-leave-active{} 离开
        .动画名-enter{}
        .动画名-leave{}
       -->
      <transition name="fade">
        <h1 v-if="flag" class="mybox">内容</h1>
      </transition>
      <!-- vue的transition 组件 结合animate.css完成动画 npm i animate.css --save 
      去main.js 导入
       import 'animate.css'
      在  transition 提供的 进入和离开的属性上 添加动画名 enter-active-class="animate__animated  动画名"-->
      <transition  
      enter-active-class="animate__animated animate__fadeInTopLeft" 
      leave-active-class="animate__animated animate__bounceOutRight">
        <h1 v-if="flag" class="mybox">内容</h1>
      </transition>
      <button @click="flag=!flag">显示隐藏</button>
    
  </div>
</template>

<script>
export default {
  name: '2209vueTranOne',

  data() {
    return {
        flag:true
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>
<style lang="less">
  .mybox{
    width:200px;
    height:200px;
    background:red;
  }
  .fade-enter-active{
      width:300px;
      height:300px;
      opacity:1;
      transition:all 1s;
  }
  .fade-leave-active{
      background:blue;
      opacity:0;
      transition:all 1s;
  }
</style>